<template>
  <view class="p_re mt20">
    <view class="class_l dis_f">
      <!-- 左侧 -->
      <scroll-view scroll-y="true" class="w210 h bac_f8 pb50 bz">
        <view
          v-for="(item, index) in list_left"
          :key="index"
          class="lh100 fz26 tac"
          :class="{ active: isActive == index + 1 }"
          @click="active_cik(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view scroll-y="true" class="w540 h pb50 bz mt50">
        <!-- 图片和副标题 -->
        <view
          class="fww auto tac dis_grid_n"
>
          <view class="mb24 p_re" v-for="(item, index) in list_right" :key="index" @click="goSeverDetail(item)">
            <image
              :src="item.image"
              mode="aspectFill"
              class="w120 h120 radius12 auto"
            ></image>
            <view
              v-if="item.label"
              class="class_sub p_ab"
              style="
                background-size: cover;
                width: 80rpx;
                height: 30rpx;
                top: 0;
                left: 18rpx;
              "
            >
              <view class="tf lh30" style="font-size: 16rpx">
                {{ item.label }}
              </view>
            </view>
            <view class="pt10 fz24">{{ item.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { storeClassLeft, storeClassRight } from "@/config/api.js";
export default {
  data() {
    return {
      isActive: 1,
      list_left: [],
      list_right: [],
    };
  },
  onLoad(options) {
    this.class_left();
    this.class_right();
    this.currentActive(options);
  },
  methods: {
		//跳转详情界面
		goSeverDetail(e){
			console.log(e);
			uni.navigateTo({
				url:'../storeDetail/storeDetail?id='+e.url
			})
		},
    //判断当前选中项
    currentActive(options) {
      if (options.cat1_id) {
        this.isActive = options.cat1_id;
        this.class_right();
      }
    },
    //点击项改变
    active_cik(i) {
      console.log(i);
      this.isActive = i + 1;
      this.class_right();
    },
    // 左侧
    class_left() {
      storeClassLeft().then((res) => {
        this.list_left = res;
      });
    },
    // 右侧
    class_right() {
      storeClassRight({ cat1_id: this.isActive }).then((res) => {
        console.log(res);
        this.list_right = res;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
// 滚动组件
.u-notice-bar[data-v-24c07869] {
  padding: 0;
  width: 485rpx;
}

.class_l {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.active {
  color: #fe3737;
  font-weight: bold;
  font-size: 30rpx;
  background: #fff;
}
.class_sub {
  background-image: url(@/static/image/class_icon_sub.png);
}
</style>
